<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    </canvas>
    <script>
        var c = document.getElementById("myCanvas")
        var ctx = c.getContext("2d")
        //实心 正方形
        // ctx.fillStyle="#ff0000";
        // ctx.fillRect(20,10,50,50)
        // 空心 正方形
        // ctx.strokeStyle = "blue";
        // ctx.strokeRect(50, 30, 50, 50)
        //线条
        // ctx.moveTo(200,0)
        // ctx.lineTo(0,100)
        // ctx.stroke()
        ///圆
        // ctx.arc(60,30,30,0,2*Math.PI)
        // ctx.stroke()
        // 文本
        //实字
        // ctx.font="16px Arial"
        // ctx.fillText("我的世界",10,50)
        // 空子
        //  ctx.font = "30px Arial"
        //  ctx.strokeText("我的世界", 10, 50)
        //渐变
        // 创建渐变
        // var grd = ctx.createLinearGradient(0, 0, 200, 0);
        // grd.addColorStop(0, "red");
        // grd.addColorStop(1, "white");

        // // 填充渐变
        // ctx.fillStyle = grd;
        // ctx.fillRect(10, 10, 150, 80);

         // 创建渐变
        // var grd = ctx.createLinearGradient(10, 10, 30, 60,60,20);
        // grd.addColorStop(0, "red");
        // grd.addColorStop(1, "white");
        // // 填充渐变
        // ctx.fillStyle = grd;
        // ctx.fillRect(10, 10, 150, 80);
    </script>
</body>

</html>
<style lang="scss">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }
    #scream{
        width: 50px;
        height: 50px;
    }
</style>